<template>
  <div class="detail">
      <topTitle title="基本信息"/>
      <div class="qu-game">
          <div class="base-content">
            <div>
                <p>趣ID：</p>
                <p>{{ detail.userId }}</p>
            </div>
            <div>
                <p>趣游戏昵称：</p>
                <p>{{ detail.nickName }}</p>
            </div>
            <div>
                <p>提交时间：</p>
                <p>{{ formatDate(detail.createTime) }}</p>
            </div>
        </div>
      </div>
      <userDetail :detailData="detail"/>
      <div class="props-main">
        <el-tabs v-model="accountTab" type="border-card" >
          <el-tab-pane label="道具详情" name="1">
              <gameProps :detail="detail"/>
              <div class="skinVos-main">
                <div class="skinVos" v-for="(item, index) in detail.skinVos" :key="index">
                  <topTitle :title="item.propTitleName"/>
                  <el-tabs class="props" type="border-card">
                    <el-tab-pane v-for="(infosItem, infosIndex) in item.infos" :key="infosIndex">
                      <template slot="label">
                          <span>{{ infosItem.name || '语音包' }} ({{ infosItem.propInfo && infosItem.propInfo.length || 0}})</span>
                      </template>
                      <div class="props-class-main">
                        <propsClassList
                          v-for="(propsItem, propsIndex) in infosItem.propInfo"
                          :showLevel="item.propTitleName === '特效枪'"
                          :key="propsIndex"
                          :propsItem="propsItem">
                        </propsClassList>
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </div>
              <topTitle title="段位信息"/>
              <div class="dan" v-if="detail.gameAccountVo">
                  <div class="dan-list" v-for="(item, index) in detail.gameAccountVo.gameFunctions" :key="index">
                    <h5 class="dan-title">{{ item.name }}</h5>
                    <section class="total-box">
                      <div class="title-box">
                        <div v-for="(ranksItem, i) in item.ranks" :key="i" class="item">{{ ranksItem.rankName }}</div>
                      </div>
                      <div class="content-box">
                          <div v-for="(ranksItem, i) in item.ranks" :key="i" class="item">{{ ranksItem.rankLevel }}</div>
                      </div>
                    </section>
                  </div>
              </div>
          </el-tab-pane>
          <el-tab-pane label="收益明细" name="2">
            <earningsDetail v-if="accountTab === '2'" />
          </el-tab-pane>
        </el-tabs>
      </div>
  </div>
</template>
<script>
import { formatDate } from '@/utils/utils'
import userDetail from './components/userDetail'
import gameProps from '../components/gamePorps'
import skinVos from '../components/skinVos'
import earningsDetail from './components/earningsDetail'
import propsClassList from '../components/propsClassList'
export default {
  components: {
    userDetail,
    gameProps,
    skinVos,
    earningsDetail,
    propsClassList
  },
  data () {
    return {
        accountTab: '1',
        detail: {},
        skinVos: [],
        accountNo: '',
        gameId: '',
        userId: '',
        dataId: ''
    }
  },
  created () {
      const { dataId, userId } = this.$route.query
      this.dataId = dataId
      this.userId = userId
      this.getDetail()
  },
  methods: {
      getDetail () {
          this.$http.post('/peace/selectAccountManageView', {
              userId: this.userId,
              dataId: this.dataId
          }).then(res => {
            if (res.code === '0') {
                this.detail = res.data || {}
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        })
      },
      formatDate (time) {
        return formatDate(time)
      }
  }
}
</script>
<style lang="scss" scoped>
.detail {
  .qu-game{
    display: flex;
    justify-content: space-between;
    .account{
      line-height: 32px;
      span{
        margin-right: 20px;
      }
    }
    .base-content {
      display: flex;
      color: #333;
      font-size: 14px;
      line-height: 22px;
      div {
          margin-right: 30px;
      }
    }
  }
  .props-main{
    margin-top: 20px;
  }
  .dan{
      display: flex;
      padding-bottom: 100px;
      .dan-title{
        margin: 10px 0;
        font-size: 16px;
        text-align: center;
      }
      .dan-list{
        flex: 1;
        margin: 0 20px
      }
  }
  .skinVos{
    margin: 20px 0;
    .props {
      margin: 0 0 20px;
    }
    .props-title{
      margin: 10px 0;
    }
    .props-class-main{
      display: flex;
      flex-wrap: wrap;
    }
  }
}
</style>
